<template>
    <!-- 家访申请 -->
    <view class="page" style="background-color: white !important;">
        <view class="flex text-center font-size-16 align-center font-bold font-color-fff">
            <navigator url="/pages/social/home_apply" open-type="redirect" class="flex-1 tab-item active">申请帮扶</navigator>
            <view class="tab-line"></view>
            <navigator url="/pages/social/pub_apply" open-type="redirect" class="flex-1 tab-item unactive">加入爱心帮帮团</navigator>
        </view>
        <clear-line :height="8" :bacColor="'#F4F5FA'"></clear-line>
        <view class="container font-color-666 font-color-fff">
            <view class="flex align-center mar-t-15">
                <view class="font-size-17 font-bold  font-color-333 flex-1">儿童情况:</view>
                <navigator url="/pages/social/be_apply"
            open-type="navigate"
			hover-class="none"  class="pos-fixed my-apply-history font-size-13 flex align-center flex-column justify-center mar-r-10">
                    <p>申 请</p>
                    <p>记 录</p>
                </navigator>
            </view>
            <view class="border-b-1 flex list-item align-center">
                <view class="title font-size-16">姓名</view>
                <view>:</view>
                <view class="flex-1 box-b mar-l-20">
                    <input
                        type="text"
                        v-model="child_usernme"
                        placeholder="请填写儿童姓名"
                        placeholder-clas="input-placeholder"
						maxlength="20"
                    />
                </view>
            </view>
            <view class="border-b-1 flex list-item align-center">
                <view class="title font-size-16">性别</view>
                <view>:</view>
                <radio-group @change="sexChange" class="flex-1 box-b mar-l-20">
                    <label class="dis-inline-block radio-item pad-l-10" >
                        <view class="font-size-15">
                            <radio value="boy" :checked="child_sex === 'boy'" style="transform:scale(0.7)"></radio>
							<text class="font-size-16">男</text>
                        </view>
                    </label>
                    <label class="dis-inline-block radio-item" >
                        <view class=" font-size-15">
                            <radio value="girl" :checked="child_sex === 'girl'" style="transform:scale(0.7)"/></radio>
							<text class="font-size-16">女</text>
                        </view>
                    </label>
                </radio-group>
            </view>
            <view class="border-b-1 flex list-item align-center">
                <view class="title font-size-16">出生日期</view>
                <view>:</view>
                <picker class="flex box-b mar-l-20" mode="date" :value="birthday" :start="startDate" :end="endDate" @change="bindDateChange">
                    <view class="uni-input font-size-16 pad-l-10">{{birthday}}</view>
                </picker>
            </view>
           <!-- <view class="border-b-1 flex list-item align-center">
                <view class="title font-size-16">家庭住址</view>
                <view>:</view>
                <view class="flex-1 box-b flex align-center">
                    <input type="text" v-model="home_address"/>
                </view>
            </view> -->
			<view class="font-color-666 border-b-1">
			    <view class="list-item flex">
					<view class="title font-size-16">家庭住址</view>
					<view class="font-size-16">:</view>
					<view class="mar-l-30 font-size-16">
						苍南县
					</view>
					<!-- <input type="text" v-model="zhen" @click="pickPop"/> -->
					<picker class="flex-1" @change="bindPickerChange" :value="zhenIndex" :range="zhenList">
						
						<view class="uni-input font-size-16 mar-l-7 font-color-999 flex align-center w-100" v-if="!zhen">
							<text class="">请选择镇 </text>
							<text>></text>
						</view>
						<view class="uni-input font-size-16 mar-l-7 w-100" v-else>{{zhen}}</view>
					</picker>
				</view>
			    <view class="box-b over-hid">
			       <textarea name="" id="" cols="10" rows="2" class="" placeholder="详细地址" v-model="home_address" style="height: 120rpx;" maxlength="50">
			
			       </textarea>
			    </view>
			</view>
            <view class="border-b-1 flex list-item align-center">
                <view class="title font-size-16">身份证号</view>
                <view>:</view>
                <view class="flex-1 box-b mar-l-20">
                    <input type="text" v-model="card_num" maxlength="18" placeholder="请填写身份证号"/>
                </view>
            </view>
            <view class="flex list-item align-center border-b-1">
                <view class="title font-size-16">学校</view>
                <view>:</view>
                <view class="flex-1 box-b mar-l-20">
                    <input type="text" v-model="school" maxlength="50" placeholder="请填写学校"/>
                </view>
            </view>
            <view class="flex list-item align-center border-b-1">
                <view class="title font-size-16">身体状况</view>
                <view>:</view>
                <view class="flex-1 box-b mar-l-20">
                    <input type="text" v-model="health" maxlength="20" placeholder="请填写身体状况"/>
                </view>
            </view>
			<view class="list-item flex align-center">
				<view class="title font-color-666 font-size-16">类型</view>
				<view>:</view>
				<picker class="flex-1 mar-l-20" @change="radioChange" :value="typeIndex" :range="typeList">
					<view class="uni-input font-size-16 mar-l-10 font-color-999 flex align-center w-100" v-if="!type">
						<text class="">请选择类型 </text>
						<text>></text>
					</view>
					<view class="uni-input font-size-16 mar-l-7 w-100 font-color-666" v-else>{{type}}</view>
				</picker>
			</view>
        </view>
        <clearLine :height="15" bacColor="#F4F5FA"></clearLine>
		<!-- <view class="flex align-center justify-center font-color-999 font-size-16 pad-10">
			<uni-icons type="plus"color="#999"></uni-icons>
			<text class="mar-l-5">添加监护人</text>
		</view>
		<clearLine :height="15" bacColor="#F4F5FA"></clearLine> -->
        <view class="container font-color-666 font-color-fff">
            <view class="font-size-17 font-bold mar-t-10 font-color-333">监护人一:</view>
            <view class="border-b-1 flex list-item align-center">
                <view class="title font-size-16">与被监护人关系</view>
                <view>:</view>
                <view class="flex-1 box-b mar-l-20">
					<picker class="flex-1" @change="bindPickerChangeRelationship" :value="relationshipIndex" :range="relationshipList">
						<view class="uni-input font-size-16 mar-l-10 font-color-999 flex align-center w-100" v-if="!guardianship[0].relase">
							<text class="">请选择 </text>
							<text>></text>
						</view>
						<view class="uni-input font-size-16 mar-l-10 w-100" v-else>{{guardianship[0].relase}}</view>
					</picker>
                </view>
            </view>
            <view class="border-b-1 flex list-item align-center">
                <view class="title font-size-16">姓名</view>
                <view>:</view>
                <view class="flex-1 box-b mar-l-20">
                    <input
                        type="text"
                        v-model="guardianship[0].name"
						maxlength="20"
						placeholder="请填写监护人姓名"
                    />
                </view>
            </view>
            <view class="border-b-1 flex list-item align-center">
                <view class="title font-size-16">联系方式</view>
                <view>:</view>
                <view class="flex-1 box-b mar-l-20">
                    <input
                        type="text"
                        v-model="guardianship[0].mobile"
						maxlength="11"
						placeholder="请填写联系方式"
                    />
                </view>
            </view>
            <view class="border-b-1 flex list-item align-center">
                <view class="title font-size-16">职业</view>
                <view>:</view>
                <view class="flex-1 box-b mar-l-20">
                    <input
                        type="text"
                        v-model="guardianship[0].job"
						maxlength="20"
						placeholder="请填写职业"
                    />
                </view>
            </view>
            <view class="border-b-1 flex list-item align-center">
                <view class="title font-size-16">现居地址</view>
                <view>:</view>
                <view class="flex-1 box-b mar-l-20">
                    <input
                        type="text"
                        v-model="guardianship[0].address"
						maxlength="50"
						placeholder="请填写现居地址"
                    />
                </view>
            </view>
            
        </view>
        <view class="container font-color-666 font-color-fff">
            <view class="font-size-17 font-bold mar-t-10 font-color-333">监护人二:</view>
            <view class="border-b-1 flex list-item align-center">
                <view class="title font-size-16">与被监护人关系</view>
                <view>:</view>
                <view class="flex-1 box-b mar-l-20">
                   <!-- <input
                        type="text"
                        v-model="guardianship[1].relase"
                    /> -->
					<picker class="flex-1" @change="bindPickerChangeRelationship2" :value="relationshipIndex2" :range="relationshipList">
						<view class="uni-input font-size-16 mar-l-10 font-color-999 flex align-center w-100" v-if="!guardianship[1].relase">
							<text class="">请选择 </text>
							<text>></text>
						</view>
						<view class="uni-input font-size-16 mar-l-10 w-100" v-else>{{guardianship[1].relase}}</view>
					</picker>
                </view>
            </view>
            <view class="border-b-1 flex list-item align-center">
                <view class="title font-size-16">姓名</view>
                <view>:</view>
                <view class="flex-1 box-b mar-l-20">
                    <input
                        type="text"
                        v-model="guardianship[1].name"
						placeholder="请填写监护人姓名(选填)"
                    />
                </view>
            </view>
           
            <view class="border-b-1 flex list-item align-center">
                <view class="title font-size-16">联系方式</view>
                <view>:</view>
                <view class="flex-1 box-b mar-l-20">
                    <input
                        type="text"
                        v-model="guardianship[1].mobile"
						maxlength="11"
						placeholder="请填写联系方式(选填)"
                    />
                </view>
            </view>
            <view class="border-b-1 flex list-item align-center">
                <view class="title font-size-16">职业</view>
                <view>:</view>
                <view class="flex-1 box-b mar-l-20">
                    <input
                        type="text"
                        v-model="guardianship[1].job"
						placeholder="请填写职业(选填)"
                    />
                </view>
            </view>
            <view class="border-b-1 flex list-item align-center">
                <view class="title font-size-16">现居地址</view>
                <view>:</view>
                <view class="flex-1 box-b mar-l-20">
                    <input
                        type="text"
                        v-model="guardianship[1].address"
						placeholder="请填写现居地址(选填)"
                    />
                </view>
            </view>
        </view>
        
        <clear-line :height="8" :bacColor="'#F4F5FA'"></clear-line>
        <view class="container font-color-666 font-color-fff"> 
            <view class="list-item flex">
				<view class="title font-size-16">申请理由:</view>
			</view>
            <view class="box-b over-hid">
               <textarea name="" id="" cols="30" rows="10" class="" placeholder="请填写申请理由" v-model="remark">

               </textarea>
            </view>
        </view>
        <button class="confirm-btn" @click="confirm" :loading="isDisable">提交申请</button>
        <view style="height:60px"></view>
    </view>
</template>

<script>
import {homeApply,homeApplyDetail,getSocialType} from '@/utils/http'
// import consultList from '@/components/consult-list'
// import uniDataPicker from "@/components/uni-data-picker/uni-data-picker";
export default {
	components:{
		// uniDataPicker
	},
    data() {
        return {
            child_usernme:'',
            child_sex:'boy',
            birthday:this.getDate(),
            home_address:'',
            card_num:'',
            school:'',
            health:'',
			zhen:'',
			zhenList:['灵溪镇','桥墩镇','马站镇','钱库镇','金乡镇','望里镇','宜山镇','藻溪镇','莒溪镇','南宋镇','矾山镇','炎亭镇','大渔镇','赤溪镇','沿浦镇','霞关镇','岱岭畲族乡','凤阳畲族乡'],
			zhenIndex:'',
            guardianship:[
                {
                    name:'',
                    mobile:'',
                    relase:'',//关系
                    job:'',
                    address:'',
                },
                {
                    name:'',
                    mobile:'',
                    relase:'',//关系
                    job:'',
                    address:'',
                },
            ],
            remark:'',
            isDisable:false,
            info:'',
            type:'',
			typeIndex:'',
            typeList: ['留守儿童', '事实无人抚养儿童', '低保底边等困难家庭的儿童', '其他儿童'],
			relationshipIndex:'',
			relationshipIndex2:'',
			relationshipList: ['爷爷', '奶奶', '爸爸', '妈妈', '外公', '外婆','叔叔','伯伯','姑姑','阿姨'],
        }
    },
    computed: {
        startDate() {
            console.log();
            return this.getDate('start');
        },
         endDate() {
            return this.getDate('end');
        }
    },
    methods: {
		pickPop(){
			
		},
		getSocialType() {
			getSocialType().then(res=>{
			    if(res){
			        console.log('getSocialType——res',res);
			       this.typeList = res.type
				   this.relationshipList = res.relation
			    }
			})
		},
		bindPickerChange: function(e) {
			console.log('picker发送选择改变，携带值为', e.target.value)
			this.zhenIndex = e.target.value
			this.zhen = this.zhenList[this.zhenIndex]
		},
		onchangeZhen(e){
			const value = e.detail.value
			console.log('value',value)
		},
        radioChange(e){
            // this.type_name = e.detail.value;
			// console.log('this.type_name',this.type_name)
			this.typeIndex = e.target.value
			this.type = this.typeList[this.typeIndex]
			console.log('this.type',this.type)
        },
		bindPickerChangeRelationship(e){
			this.relationshipIndex = e.target.value
			this.guardianship[0].relase = this.relationshipList[this.relationshipIndex]
        },
		bindPickerChangeRelationship2(e){
			this.relationshipIndex2 = e.target.value
			this.guardianship[1].relase = this.relationshipList[this.relationshipIndex2]
		},
        sexChange(e){
            console.log(e);
            this.child_sex = e.detail.value
        },
        familyChange(e){
            this.family_relation = e.detail.value
           
        },
        bindDateChange: function(e) {
            this.birthday = e.target.value
        },
        confirm(){
            let _that = this;
			if(!this.child_usernme){
				uni.showModal({
					content:'请选择儿童姓名',
					showCancel:false
				})
				return
			}
			if(!this.zhen){
				uni.showModal({
					content:'请选择镇',
					showCancel:false
				})
				return
			}
			if(!this.home_address){
				uni.showModal({
					content:'请填写详细地址',
					showCancel:false
				})
				return
			}
			if(this.card_num.length<18){
				uni.showModal({
					content:'请正确填写身份证号',
					showCancel:false
				})
				return
			}
			if(this.hasNull(this.guardianship[0])){
				uni.showModal({
					content:'请填写完整监护人一的信息',
					showCancel:false
				})
				return
			}
			if(this.guardianship[1].relase){
				//监护人2
				if(this.hasNull(this.guardianship[1])){
					uni.showModal({
						content:'请填写完整监护人二的信息',
						showCancel:false
					})
					return
				}
			}
			if(!this.remark){
				uni.showModal({
					content:'请填写申请理由',
					showCancel:false
				})
				return
			}
			
			this.isDisable = true
			const params = {
                child_usernme:this.child_usernme,
                child_sex:this.child_sex,
                birthday:this.birthday,
                home_address:`苍南县,${this.zhen},${this.home_address}`,//'苍南县'+this.zhen+this.home_address,
                card_num:this.card_num,
                school:this.school,
                health:this.health,
                guardianship:JSON.stringify(this.guardianship),
                type_name:this.type,
                remark:this.remark
            }
			console.log('params',params)
            homeApply(params).then(res=>{
                if(res){
                    console.log(res);
                    this.showModelTip('申请成功',function(){
                         uni.redirectTo({
                            url: '/pages/social/be_apply'
                        });
                    });
                }else{
                     this.isDisable = false
                }
            }).finally(res=>{
				this.isDisable = false
			})
        },
        homeApplyDetail(id){
            homeApplyDetail({id}).then(res=>{
                this.info = res;
                this.child_usernme = res.child_usernme
                this.child_sex = res.child_sex
                this.birthday = this.transformTime( res.birthday)
				let address = res.home_address
				this.zhen = address.split(',')[1]
                this.home_address = address.split(',')[2]
                this.card_num = res.card_num
                this.school = res.school
                this.health = res.health
                this.remark = res.remark
                this.type_name = res.type_name
				this.type = res.type_name
				this.guardianship = res.guardianship
            })
        }
    },
    onLoad(option) {
        if(option.id){
            this.homeApplyDetail(option.id);
        }
        this.getSocialType()
    },
};
</script>

<style scoped>
.tab-item{
    padding-top: 30rpx;
    padding-bottom: 30rpx;
}
.tab-line{height:28rpx; width: 1px; background: #ccc;}
.tab-item.active{
    color: #0092FF;
}
.tab-item.unactive{
    color: #666666;
}
.list-item {
    padding-top: 13px;
    padding-bottom: 10px;
    box-sizing: border-box;
}
.list-item .title {
    min-width: 170rpx;
    text-align: justify;
    text-align-last: justify;
}
.list-item input {
    padding-left: 10px;
    padding-right: 10px;
}
/deep/.input-placeholder {
    font-size: 32rpx;
	color: #c8c8c8;
}
.radio-item {
    width: 33.33333%;
}
textarea {
    background-color: #f7f8fa;
    width: 100%;
    padding-top: 10px;
    padding-right: 10px;
    padding-left: 10px;
}
.my-apply-history{
    right: 0;
    bottom: 120px;
    background-color: #0092FF;
    color: #fff;
    text-align: center;
    min-height: 50px;
    min-width: 50px;
    border-radius: 50%;
    z-index: 999;
	box-shadow: 0px 1px 1px 2px #b2cbe1;
}
</style>